<template>
	<div>
		<carHeader :title="'救援管理'"></carHeader>
		<div class="zong">
			<div class="head">
				<!-- <div class="body" :class="{'body':true,'bodyheight':activeIndex===0}"> -->
				<div class="body">
					<div class="body1">
						<div class="bodyhead">
							<div class="son1">
								<div class="son11" :class="{ 'item': true, 'active': activeIndex === 0}"
									@click="changeColor()">
									<span>wait</span>
								</div>
								<div class="son12" :class="{ 'item': true, 'active': activeIndex === 1 }"
									@click="changeColor1()">
									<span>ing</span>
								</div>
								<div class="son" :class="{ 'item': true, 'active': activeIndex === 2 }"
									@click="changeColor2()">
									<span>end</span>
								</div>
							</div>
						</div>

						<div v-if="activeIndex===0" v-for="(item,index) in data" :key="index">
							<div class="bodyhead22" >
								<p @click="dianji">求助人：{{item.jyrwQiuzhuren}}</p>
								<p>电话：{{item.jyrwDianhua}}</p>
								<p>救援类型：{{item.jyrwJiuyuanleixing}}</p>
								<p>车牌号：{{item.jyrwChepai}}</p>
								<p>救援位置：{{item.jyrwJiuyuanweizhi}}</p>
								<p>目的位置：{{item.jyrwZhongdianweizhi}}</p>
								<p>申请时间：{{item.jyrwShenqingshijian}}</p>
								<p>订单编号：{{item.jyrwDingdanbianhao}}</p>
								<button type="primary" class="sonson1" @click="huiying(item)">回应</button>
							</div>
						</div>


						<div v-if="activeIndex===1" v-for="(item,index) in dataing" :key="index">
							<div class="bodyhead22" >
								<p @click="dianji">求助人：{{item.jyrwQiuzhuren}}</p>
								<p>电话：{{item.jyrwDianhua}}</p>
								<p>救援类型：{{item.jyrwJiuyuanleixing}}</p>
								<p>车牌号：{{item.jyrwChepai}}</p>
								<p>救援位置：{{item.jyrwJiuyuanweizhi}}</p>
								<p>目的位置：{{item.jyrwZhongdianweizhi}}</p>
								<p>申请时间：{{item.jyrwShenqingshijian}}</p>
								<p>回应时间：{{item.jyrwHuiyingshijian}}</p>
								<p>到达时间：{{item.jyrwDaodashijian}}</p>
								<p>订单编号：{{item.jyrwDingdanbianhao}}</p>
								<button type="primary" class="sonson1" @click="daoda(item)">到达</button>
								<button type="primary" class="sonson1" @click="wancheng(item)">完成</button>
							</div>
						</div>
						<div v-if="activeIndex===2" v-for="(item,index) in dataed" :key="index">
							<div style="background-color: red;width: 200rpx;"></div>
							<div class="bodyhead22" >
								<p @click="dianji">求助人：{{item.jyrwQiuzhuren}}</p>
								<p>电话：{{item.jyrwDianhua}}</p>
								<p>救援类型：{{item.jyrwJiuyuanleixing}}</p>
								<p>车牌号：{{item.jyrwChepai}}</p>
								<p>救援位置：{{item.jyrwJiuyuanweizhi}}</p>
								<p>目的位置：{{item.jyrwZhongdianweizhi}}</p>
								<p>申请时间：{{item.jyrwShenqingshijian}}</p>
								<p>回应时间：{{item.jyrwHuiyingshijian}}</p>
								<p>到达时间：{{item.jyrwDaodashijian}}</p>
								<p>完成时间：{{item.jyrwWanchengshijian}}</p>
								<p>订单编号：{{item.jyrwDingdanbianhao}}</p>
							</div>
						
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import index from '../../uni_modules/uview-ui';
	export default {
		data() {
			return {
				index: 0,
				activeIndex: 0,
				index1: '',

				ws: null,
				data: null,
				dataing:null,
				dataed:null
			};
		},
		created() {
			this.connect();
		},
		methods: {
			changeColor() {
				this.activeIndex = 0;
			},
			changeColor1() {
				this.activeIndex = 1;
			},
			changeColor2() {
				var that=this;
				uni.request({
					url:"http://localhost:8080/shop/listByShopId/"+this.$global.shopId,
				
					success(res) {
						that.dataed = res.data
						that.activeIndex = 2;
					}
				})
			},
			connect() {
				this.ws = new WebSocket('ws://localhost:8080/shop/websocket');

				this.ws.onopen = () => {
					console.log('WebSocket Connected');
					this.ws.send(this.$global.shopId)
				};

				this.ws.onmessage = (event) => {
					console.log('Message from server ', event.data);
					if(JSON.parse(event.data)["-1"].jyrwZhuangtai==-1){
						this.data = JSON.parse(event.data)
						this.data = this.data.delete(-1)
					}else if (JSON.parse(event.data)["-1"].jyrwZhuangtai==-2){
						this.dataing = JSON.parse(event.data)
					}else if (JSON.parse(event.data)["-1"].jyrwZhuangtai==-3){
						this.dataed = JSON.parse(event.data)
					}
					
				};

				this.ws.onerror = (error) => {
					console.error('WebSocket Error ' + error);
				};

				this.ws.onclose = () => {
					console.log('WebSocket Connection Closed');
				};
			},
			dianji() {
				console.log(this.data)
				console.log(this.dataing)
				console.log(this.dataed)
			},
			huiying(item) {
				item.jyrwHuiyingshijian = this.formattedCurrentTime()
				item.jyrwHuiyingrenid = this.$global.shopId
				item.jyrwZhuangtai = 2
				
				this.ws.send(JSON.stringify(item));
				this.activeIndex = 1;
				console.log("回应了")
				console.log(JSON.stringify(item))
			},
			daoda(item) {
				console.log("到达")
				console.log(item.jyrwHuiyingshijian)
				item.jyrwDaodashijian = this.formattedCurrentTime()
				item.jyrwZhuangtai = 3
				this.ws.send(JSON.stringify(item));
				console.log(JSON.stringify(item))
			},
			wancheng(item) {
				item.jyrwWanchengshijian = this.formattedCurrentTime()
				item.jyrwZhuangtai = 4
				this.ws.send(JSON.stringify(item));
				console.log("完成了")
				console.log(JSON.stringify(item))
			},
			formattedCurrentTime() {
				const now = new Date();
				// 使用getFullYear(), getMonth() (注意月份是从0开始的), getDate(), getHours(), getMinutes(), getSeconds()  
				return `${now.getFullYear()}-${('0' + (now.getMonth() + 1)).slice(-2)}-${('0' + now.getDate()).slice(-2)} ${('0' + now.getHours()).slice(-2)}:${('0' + now.getMinutes()).slice(-2)}:${('0' + now.getSeconds()).slice(-2)}`;
			}
		},
		beforeDestroy() {
			if (this.ws) {
				this.ws.close();
			}
		}
	}
</script>

<style>
	.color1 {
		color: red;
	}

	.color11 {
		color: greenyellow;
	}

	.color111 {
		color: #bbbbbb;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.zong {
		height: 1300rpx;
		width: 100%;
		background-color: #eeeeee;
		position: relative;
		float: left;
		top: -130px;
	}

	.head {
		height: 340rpx;
		background-color: #2276FF;
		padding-top: 10px;

	}

	.body {
		display: flex;
		background-color: #ffffff;
		/* height: 950rpx; */
		width: 700rpx;
		margin: 0 auto;
		border-radius: 20px;

	}

	.body.bodyheight {
		display: flex;
		height: 530rpx;
		/* 	height: listheight+'px'; */
	}

	.body1 {
		margin: 0 auto;
		/* 	background-color: aquamarine; */
		width: 650rpx;
		/* 	height: 710rpx; */
	}

	.bodyhead {
		height: 125rpx;
		/* 	background-color: aliceblue; */
		border-bottom: 3px solid #eeeeee;
		padding-top: 25px;

	}

	.bodyhead2 {
		height: 230rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead22 {

		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead3 {
		height: 230rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead33 {
		height: 140rpx;

	}

	.son1 {
		height: 40px;
		margin: 0 auto;
		width: 150px;
		background-color: pink;
		/* padding-top: 10px; */
		border-radius: 30px;
		text-align: center;
		line-height: 40px;
		border: 1px solid #eeeeee;
		/* margin-top: 10px; */
	}

	.son11 {
		float: left;
		height: 40px;
		width: 50px;
		background-color: #eeeeee;
		color: #009AFF;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}

	.son12 {
		float: left;
		height: 40px;
		width: 50px;
		background-color: #009AFF;
		color: #eeeeee;
		
	}
	.son {
		float: left;
		height: 40px;
		width: 50px;
		background-color: #009AFF;
		color: #eeeeee;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.item {
		color: #2276FF;
		background-color: #eeeeee;
		font-size: 16px;
	}

	.item.active {
		color: #eeeeee;
		background-color: #2276FF;
	}

	p {
		margin-top: 15px;
	}

	.sonson {
		margin-left: 200px;

		background-color: #009AFF;

		padding: 5px 20px 5px 20px;
		border-radius: 20px;

	}

	.sonson1 {
		/* margin-left: 200px; */
		background-color: #2276FF;
		border-radius: 20px;
		position: relative;
		font-size: 16px;
		line-height: 60rpx;
		width: 160rpx;
		height: 60rpx;
		left: 240px;
		top: -45px;

	}

	.sonson2 {
		/* margin-left: 200px; */
		background-color: #2276FF;
		border-radius: 20px;
		/* 	position: relative; */
		font-size: 16px;
		line-height: 60rpx;
		width: 160rpx;
		height: 60rpx;
		left: 240px;
		top: -30px;

	}

	.bodyhead3 .sonson {
		margin-left: 180px;
	}

	.hail {
		height: 40px;
		width: 250px;
		background-color: #2276FF;
		margin-left: 62px;
		margin-top: 350px;
		border-radius: 20px;
		/* text-align: center; */
		line-height: 40px;
		font-size: 18px;
		/* color: #ffffff; */
		position: fixed;
	}
</style>